<template>
	<view class="gjl-components">
		<view class="logo">
			<image :src="vuex_initConfig.common_page.logo_img" mode=""></image>
		</view>
		<view class="login-form">
			<u-form :model="form" ref="uForm" :error-type="['toast']">
				<u-form-item label="" left-icon="man-add" prop="mobile">
					<u-input v-model="form.mobile" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item label="" left-icon="lock" prop="captcha" v-if="type == 1">
					<u-input v-model="form.captcha" placeholder="请输入验证码" />
					<view class="code-btn" slot="right">
						<u-button @click="getMobileCode('user_register')" size="mini">{{tips}}</u-button>
					</view>
				</u-form-item>
				<u-form-item label="" left-icon="lock" prop="password">
					<u-input type="password" v-model="form.password" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item label="" left-icon="lock" prop="captcha" v-if="type == 2">
					<u-input v-model="form.captcha" placeholder="请输入验证码" />
					<view class="code-btn" slot="right">
						<u-button @click="getMobileCode('password')" size="mini">{{tips}}</u-button>
					</view>
				</u-form-item>
				<u-form-item label="" left-icon="lock" prop="inviteCode" v-if="type == 1">
					<u-input v-model="form.inviteCode" placeholder="请输入推广码非必选" />
				</u-form-item>
			</u-form>
			<view class="submit-btn">
				<u-button @click="submit(1)" :custom-style="{color: '#fff',background: '#FFDF28',fontSize: '32rpx'}" v-if="type == 0">登录
				</u-button>
				<u-button @click="submit(2)" :custom-style="{color: '#fff',background: '#FFDF28',fontSize: '32rpx'}" v-if="type == 1">注册
				</u-button>
				<u-button @click="submit(3)" :custom-style="{color: '#fff',background: '#FFDF28',fontSize: '32rpx'}" v-if="type == 2">重置
				</u-button>
			</view>
		</view>
		<view class="link-box">
			<template v-if="type == 0">
				<view class="link-item" @click="type = 1">注册账号</view>
				<view class="link-item" @click="type = 2">忘记密码</view>
			</template>
			<template v-else>
				<view class="link-item" @click="type = 0">去登陆</view>
			</template>
		</view>
		<view class="footer-tip">
			<text class="text">登录注册即代表阅读并同意</text><text class="a" @click="jRouter({path: 'richtextIndex',query:{id:'rule_user'}})">《用户协议》</text>
		</view>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '15037983727',
					password: 'asd123456',
					captcha: '',
					inviteCode: ''
				},
				type: 0,
				seconds: 60,
				tips: ''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		mounted() {
			this.setRules()
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getMobileCode(type) {
				if (this.$refs.uCode.canGetCode) {
					let obj = {
						mobile: this.form.mobile,
						event: type,
						apiLoadText: '正在获取验证码'
					}
					this.$apis.getMobileCode(obj).then((res)=>{
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				
			},
			start() {
				
			},
			submit(type) {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(type == 1){
							this.login()
							return
						}
						if(type == 2){
							this.register()
							return
						}
						if(type == 3){
							this.resetpw()
							return
						}
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 忘记密码
			resetpw(){
				let obj = {
					mobile: this.form.mobile,
					password: this.form.password,
					re_password: this.form.password,
					code: this.form.captcha
				}
				this.$apis.setPassword(obj).then((res)=>{
					this.form.mobile = '';
					this.form.password = '';
					this.form.captcha = '';
					this.type = 0;
				})
			},
			// 注册
			register(){
				let obj = {
					mobile: this.form.mobile,
					password: this.form.password,
					invite_code: this.form.inviteCode,
					code: this.form.captcha
				}
				this.$apis.commonReg(obj).then((res)=>{
					this.$emit('loginSuccess',res);
					this.form.mobile = '';
					this.form.password = '';
					this.form.captcha = '';
					this.form.inviteCode = '';
					this.type = 0;
				})
			},
			// 登录
			login(){
				let obj = {
					mobile: this.form.mobile,
					password: this.form.password
				}
				this.$apis.h5Login(obj).then((res)=>{
					this.$emit('loginSuccess',res);
				})
			},
			// 设置表单验证
			setRules() {
				const rules = {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					captcha: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				}
				this.$refs.uForm.setRules(rules);
			}
		},
	}
</script>
<style scoped lang="scss">
	.gjl-components {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		image {
			height: 100%;
			width: 100%;
		}
		.link-box{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.link-item{
				
			}
		}
		.logo {
			height: 150rpx;
			width: 150rpx;
		}
		.footer-tip {
			font-size: $h5;
			line-height: $h5;
			color: $subtext-color;
		}
		.login-form {
			margin-top: 30rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 100rpx;
			.submit-btn{
				margin-top: 30rpx;
			}
		}
	}
</style>
